﻿import QtQuick 2.12
import QtGraphicalEffects 1.0

// 多行信息显示步骤条
Item {

    // public ===================================================================================

    property var stepTitle: ["步骤1", "步骤22", "步骤333", "步骤4444"]
    property var stepInfo: ["步骤1的信息", "步骤2的信息步骤2的信息", "步骤3的信息步骤3的信息步骤3的信息", "步骤4的信息步骤4的信息步骤4的信息步骤4的信息"]
    property var stepIcon: []       // 可自定义每个步骤的图标

    property var showTitle: true
    property var showInfo: true

    property real lineWidth: 2
    property color lineColor: "#888888"
    property color lineColor_checked: "#333333"
    property color lineColor_completed: config.themeColor

    property int direct: 0      // [0]横向 [1]纵向

    // 当前步骤编号
    property int step: 0

    property real stepSpacing: direct === 0 ? 120*dp : 80*dp

    property real infoWidth: direct === 0 ? stepSpacing : 120*dp

    property real iconSize: config.fontsize + 12*dp

    property bool clickable: true           // 是否可通过点击步骤标题来切换步骤

    // 下一步
    function nextStep(){
        if(step >= stepTitle.length){
            return false
        }
        step ++
        return true
    }
    // 上一步
    function lastStep(){
        if(step <= 0){
            return false
        }
        step --
        return true
    }

    // private ======================================================================================


    height: layout.implicitHeight + (showTitle ? 30*dp : 0) + (showInfo ? 30*dp : 0)
    width: layout.implicitWidth


    Grid{
        id: layout

        columns: direct===0 ? stepTitle.length : 1

        Repeater{

            model: stepTitle.length

            Item{
                id: item
                property color color: index < step ? lineColor_completed : (index===step ? lineColor_checked : lineColor)

                width: direct === 0 ? (index<stepTitle.length-1 ? iconSize + stepSpacing : iconSize) : iconSize
                height: direct === 0 ? iconSize : (index<stepTitle.length-1 ? iconSize + stepSpacing : iconSize)

                // 图标
                Rectangle{
                    id: icon
                    height: iconSize; width: iconSize
                    radius: height * 0.5
                    border.color: item.color
                    border.width: lineWidth
                    Text{
                        visible: step <= index
                        anchors.centerIn: parent
                        text: index + 1
                        font.pixelSize: config.fontsize
                        font.bold: true
                        color: item.color

                    }
                    CustomImage{
                        visible: step > index
                        source: "qrc:/picture/tick1_b.png"
                        anchors.centerIn: parent
                        height: iconSize - 12*dp
                        width: iconSize - 12*dp
                    }
                }

                // 文本
                Item{
                    width: infoWidth
                    height: 30*dp
                    anchors.centerIn: icon
                    anchors.verticalCenterOffset: direct === 0 ? icon.height*0.5 + text_title.contentHeight*0.5 + 5*dp : (iconSize-config.fontsize-2) * 0.5
                    anchors.horizontalCenterOffset: direct === 0 ? 0 : (icon.width*0.5 + infoWidth * 0.5 + 5*dp)
                    Text{       // 步骤标题文字

                        visible: showTitle
                        id: text_title
                        text: stepTitle[index]
                        font.bold: true
                        font.pixelSize: config.fontsize + 1
                        width: infoWidth
                        horizontalAlignment: direct === 0 ? Text.AlignHCenter : Text.AlignLeft
                        color: item.color
                    }
                    Text{       // 步骤描述性文字
                        id: text_info
                        text: stepInfo[index]
                        visible: showInfo
                        font.pixelSize: config.fontsize - 1
                        x: direct === 0 ? 0 : 0
                        y: direct === 0 ? config.fontsize + 6*dp : config.fontsize + 6*dp
                        width: infoWidth
                        wrapMode: Text.WordWrap
                        horizontalAlignment: direct === 0 ? Text.AlignHCenter : Text.AlignLeft
                        color: item.color
                    }

                }



                // 连线
                Rectangle{
                    visible: index < stepTitle.length - 1
                    height: direct === 0 ? lineWidth : stepSpacing
                    width: direct === 0 ? stepSpacing : lineWidth
                    x: direct === 0 ? iconSize : iconSize * 0.5 - lineWidth*0.5
                    y: direct === 0 ? iconSize * 0.5 - lineWidth*0.5 : iconSize
                    color: index < step ? lineColor_completed : lineColor
                }

            }

        }
    }


}
